<template>
  <n-card :bordered="false">
    <n-alert :show-icon="false" class="m-b-10">
      <n-form :model="searchParam" class="search-forms"
              inline
              :show-feedback="false"
              label-placement="left"
              @keydown.enter.prevent="handleSubmitSearch">
        <n-form-item label="">
          <n-input v-model:value="searchParam.key" placeholder="输入用户昵称或电话号码查询" style="width: 280px"
                   clearable/>
        </n-form-item>
        <n-form-item>
          <search-button-group @submit="handleSubmitSearch"
                               @reset="()=>(searchParam.key=null)"/>
        </n-form-item>
      </n-form>
    </n-alert>
    <data-table ref="data_list" :columns="columns"
                :row-key="(row:Recordable) => row.id"
                :params="searchParam"
                list-url="feedback/list"
                default-serial-number
                serial-number-title="序号">
      <template #toolbarLeft>
        <n-space>
          <n-button-group>
            <n-button :type="searchParam.status==0?'primary':'default'"
                      @click="()=>(searchParam.status=0,handleSubmitSearch())">用户
            </n-button>
            <n-button :type="searchParam.status==1?'primary':'default'"
                      @click="()=>(searchParam.status=1,handleSubmitSearch())">教师
            </n-button>
          </n-button-group>
        </n-space>
      </template>

    </data-table>
  </n-card>
</template>

<script lang="ts" setup>
import {h, ref} from 'vue'
import DataTable from '@components/DataTable';
import {NImage, NImageGroup} from "naive-ui";
import SearchButtonGroup from '@components/SearchButtonGroup';
import {Config} from '@/config';

const searchParam = ref<null | string | any>({
  key: null,
  status: 0,
})

const data_list = ref<any>();
const columns = ref([
  {
    title: '头像',
    key: 'avatar',
    width: 60,
    align: 'center',
    render(row: { avatar: string }) {
      if (row.avatar) {
        return h(NImage, {
          width: 30,
          height: 30,
          src: Config.VIEW_FILE + row.avatar
        })
      }
    }
  }, {
    title: '昵称',
    key: 'userName',
    width: 150
  }, {
    title: '用户类型',
    key: 'userType',
    width: 90,
    render(row: { userType: number }) {
      const type_text = row.userType == 1 ? '教师' : '普通用户';
      return h('span', null, {default: () => (type_text)})
    }
  },
  {
    title: '电话',
    key: 'phone',
    width: 150
  }, {
    title: '反馈内容',
    key: 'content'
  }, {
    title: '图片',
    key: 'imgs',
    width: 60,
    align: 'center',
    ellipsis: {
      tooltip: false
    },
    render(row: { imgs: string[] }) {
      const imgs: any = [];
      if (row.imgs != null) {
        for (let i = 0; i < row.imgs.length; i++) {
          imgs.push(h(NImage, {
            width: 30,
            height: 30,
            src: Config.VIEW_FILE + row.imgs[i]
          }))
        }
      }
      return h(NImageGroup, null, {default: () => (imgs)})
    }
  }, {
    title: '创建时间',
    key: 'createTime',
    width: 175,
  },
]);

const handleSubmitSearch = () => {
  data_list.value.searchListData();
}

</script>

<style scoped lang="scss">

</style>